$(function () {
  // 发布文章
  var form = layui.form
  // 获取文章的分类类别
  // 获取筛选文章分类列表数据
  function loadCateList () {
    $.ajax({
      type: 'get',
      url: 'my/article/cates',
      success: function (res) {
        // 把数据填充到模板中
        var tags = template('cate-tpl', res)
        $('#category').html(tags)
        // 重新渲染select列表
        form.render('select')
      }
    })
  }
  loadCateList()

  // 初始化富文本
  initEditor()

  // 初始化裁剪区
  var $img = $('#image')
  var options = {
    // 纵横比
    aspectRatio: 400 / 280,
    // 预览的区域
    preview: '.img-preview'
  }
  $img.cropper(options)

  // 选择图片
  $('#selectPic').click(function () {
    $('#cover_img').click()
  })

  // 更新图片路径
  $('#cover_img').change(function (e) {
    // 获取选中的文件
    var file = e.target.files[0]
    // 根据文件生成路径
    var newImgURL = URL.createObjectURL(file)
    // 更新裁切区
    $img
     .cropper('destroy')      // 销毁旧的裁剪区域
     .attr('src', newImgURL)  // 重新设置图片路径
     .cropper(options)        // 重新初始化裁剪区域
  })

  // 处理点击提交的状态
  var state = ''
  $('.layui-btn').click(function (e) {
    var type = $(e.target).data('type')
    if (type === 'publish') {
      state = '已发布'
    } else if (type === 'temp') {
      state = '草稿'
    }
  })

  // 绑定提交动作
  $('.layui-form').submit(function (e) {
    e.preventDefault()
    console.log('submit' + state)
    var fd = new FormData(this)
    $img
      .cropper('getCroppedCanvas', { 
        // 创建一个 Canvas 画布
        width: 400,
        height: 280
      })
      .toBlob(function (blob) {
        // 参数Blob就是要上传的文章封面
        // 文章封面需要单独处理
        // 文章的状态也需要单独处理
        fd.append('state', state)
        fd.append('cover_img', blob)
        $.ajax({
          type: 'post',
          url: 'my/article/add',
          data: fd,
          // 防止把请求参数转换为字符串
          processData: false,
          // 禁止使用默认的提交参数类型
          contentType: false,
          success: function (res) {
            if (res.status === 0) {
              layer.msg(res.message)
            }
          }
        })
      })
  })

  // $('#add-form').submit(function (e) {
  //   e.preventDefault()
  //   // 需要做文件上传，所有需要FormData
  //   var fd = new FormData(this)
  //   $.ajax({
  //     type: 'post',
  //     url: 'my/article/add',
  //     data: fd,
  //     processData: false,
  //     contentType: false,
  //     success: function (res) {
  //       layer.msg(res.message)
  //     }
  //   })
  // })
})